<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>233乐园 - 发现页</title>
    <style>
        /* 重置样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            padding-top: 44px;
            padding-bottom: 50px;
            min-height: 100vh;
        }

        /* 顶栏 */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 44px;
            background-color: #ff69b4;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        /* 底栏 */
        .footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 50px;
            background-color: #ff69b4;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
        }

        /* 内容容器 */
        .content-container {
            display: flex;
            justify-content: space-around;
            padding: 10px;
            max-width: 750px;
            margin: 0 auto;
        }

        /* 列容器 */
        .column {
            width: 48%;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        /* 卡片样式 */
        .card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 10px;
            transition: transform 0.2s ease;
        }

        .card:hover {
            transform: translateY(-2px);
        }

        .card-image {
            width: 100%;
            aspect-ratio: 3/4;
            object-fit: cover;
        }

        .card-video {
            width: 100%;
            aspect-ratio: 16/9;
        }

        .card-content {
            padding: 10px;
        }

        .card-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
            line-height: 1.4;
        }

        .card-info {
            display: flex;
            justify-content: space-between;
            color: #888;
            font-size: 12px;
        }

        /* 加载指示器 */
        .loader {
            text-align: center;
            padding: 15px;
            color: #888;
        }

        /* 响应式设计 */
        @media (max-width: 600px) {
            .content-container {
                flex-direction: column;
                padding: 5px;
            }
            
            .column {
                width: 100%;
            }
        }
        
        /* 下拉刷新样式 */
        .refresh-indicator {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            z-index: 999;
            opacity: 0;
            transform: translateY(-100%);
            transition: all 0.3s ease;
        }
        
        .refresh-indicator.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .refresh-spinner {
            width: 20px;
            height: 20px;
            border: 2px solid #ccc;
            border-top: 2px solid #ff69b4;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 10px;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <!-- 顶栏 -->
    <div class="header">
        发现
    </div>

    <!-- 下拉刷新指示器 -->
    <div class="refresh-indicator" id="refreshIndicator">
        <div class="refresh-spinner"></div>
        正在刷新...
    </div>

    <!-- 内容区域 -->
    <div class="content-container">
        <div class="column" id="leftColumn"></div>
        <div class="column" id="rightColumn"></div>
    </div>

    <!-- 加载更多指示器 -->
    <div class="loader" id="loader">加载中...</div>

    <!-- 底栏 -->
    <div class="footer">
        © 2025 233乐园
    </div>

    <script>
        // 模拟API服务
        const apiService = {
            async fetchData(page = 1, type = 'all') {
                // 模拟不同数据格式
                const dataFormat = new URLSearchParams(window.location.search).get('format') || 'default';
                
                // 模拟网络延迟
                await new Promise(resolve => setTimeout(resolve, 800));
                
                if (dataFormat === 'default') {
                    return this.generateDefaultData(page, type);
                } else if (dataFormat === 'compact') {
                    return this.generateCompactData(page, type);
                } else {
                    return this.generateDefaultData(page, type);
                }
            },
            
            generateDefaultData(page, type) {
                const itemsPerPage = 6;
                const startId = (page - 1) * itemsPerPage + 1;
                const items = [];
                
                for (let i = 0; i < itemsPerPage; i++) {
                    const id = startId + i;
                    const isVideo = Math.random() > 0.7;
                    
                    items.push({
                        id: id,
                        title: `发现内容 ${id} - 默认格式`,
                        media: isVideo ? 
                            `https://www.w3schools.com/html/mov_bbb.mp4` : 
                            `https://picsum.photos/id/${id}/600/800`,
                        isVideo: isVideo,
                        author: `用户${Math.floor(Math.random() * 1000)}`,
                        likes: Math.floor(Math.random() * 1000),
                        comments: Math.floor(Math.random() * 100)
                    });
                }
                
                return {
                    items: items,
                    hasMore: page < 3, // 模拟只有3页数据
                    total: 18
                };
            },
            
            generateCompactData(page, type) {
                const itemsPerPage = 8;
                const startId = (page - 1) * itemsPerPage + 1;
                const items = [];
                
                for (let i = 0; i < itemsPerPage; i++) {
                    const id = startId + i;
                    const isVideo = Math.random() > 0.8;
                    
                    items.push({
                        id: id,
                        title: `简要内容 ${id} - 紧凑格式`,
                        media: isVideo ? 
                            `https://www.w3schools.com/html/mov_bbb.mp4` : 
                            `https://picsum.photos/id/${id + 100}/600/800`,
                        isVideo: isVideo,
                        likes: Math.floor(Math.random() * 500),
                        comments: Math.floor(Math.random() * 50)
                    });
                }
                
                return {
                    items: items,
                    hasMore: page < 5, // 模拟有5页数据
                    total: 40
                };
            }
        };

        // 卡片渲染器
        const cardRenderer = {
            renderCard(item) {
                const card = document.createElement('div');
                card.className = 'card';
                
                let mediaElement;
                if (item.isVideo) {
                    mediaElement = `
                        <video class="card-video" controls>
                            <source src="${item.media}" type="video/mp4">
                            您的浏览器不支持视频播放。
                        </video>`;
                } else {
                    mediaElement = `<img src="${item.media}" alt="图片" class="card-image">`;
                }
                
                card.innerHTML = `
                    ${mediaElement}
                    <div class="card-content">
                        <div class="card-title">${item.title}</div>
                        <div class="card-info">
                            <span>${item.author || '匿名'}</span>
                            <span>赞 ${item.likes} | 评论 ${item.comments}</span>
                        </div>
                    </div>
                `;
                
                return card;
            }
        };

        // 瀑布流布局管理器
        class WaterfallLayout {
            constructor(leftColumn, rightColumn) {
                this.leftColumn = leftColumn;
                this.rightColumn = rightColumn;
                this.leftHeight = 0;
                this.rightHeight = 0;
            }
            
            reset() {
                this.leftHeight = 0;
                this.rightHeight = 0;
                this.leftColumn.innerHTML = '';
                this.rightColumn.innerHTML = '';
            }
            
            positionCard(card) {
                if (this.leftHeight <= this.rightHeight) {
                    this.leftColumn.appendChild(card);
                    this.leftHeight += card.offsetHeight + 10; // 添加间距
                    return this.leftHeight;
                } else {
                    this.rightColumn.appendChild(card);
                    this.rightHeight += card.offsetHeight + 10; // 添加间距
                    return this.rightHeight;
                }
            }
            
            getShorterColumn() {
                return this.leftHeight <= this.rightHeight ? this.leftColumn : this.rightColumn;
            }
        }

        // 主应用逻辑
        class App {
            constructor() {
                this.leftColumn = document.getElementById('leftColumn');
                this.rightColumn = document.getElementById('rightColumn');
                this.loader = document.getElementById('loader');
                this.refreshIndicator = document.getElementById('refreshIndicator');
                
                this.waterfall = new WaterfallLayout(this.leftColumn, this.rightColumn);
                this.page = 1;
                this.isLoading = false;
                this.hasMore = true;
                this.type = 'all';
                
                // 解析URL参数
                this.params = new Proxy(new URLSearchParams(window.location.search), {
                    get: (searchParams, prop) => searchParams.get(prop)
                });
                
                this.init();
            }
            
            async init() {
                // 初始化加载数据
                await this.loadData();
                
                // 设置滚动监听
                this.setupIntersectionObserver();
                
                // 设置下拉刷新
                this.setupPullToRefresh();
                
                // 处理窗口大小变化
                window.addEventListener('resize', () => this.handleResize());
            }
            
            async loadData(refresh = false) {
                if (this.isLoading) return;
                
                if (refresh) {
                    this.page = 1;
                    this.hasMore = true;
                    this.waterfall.reset();
                }
                
                if (!this.hasMore) {
                    this.loader.textContent = '没有更多内容了';
                    return;
                }
                
                try {
                    this.isLoading = true;
                    if (refresh) {
                        this.loader.style.display = 'none';
                    } else {
                        this.loader.style.display = 'block';
                    }
                    
                    const result = await apiService.fetchData(this.page, this.type);
                    
                    // 渲染新数据
                    result.items.forEach(item => {
                        const card = cardRenderer.renderCard(item);
                        this.waterfall.positionCard(card);
                    });
                    
                    this.page++;
                    this.hasMore = result.hasMore;
                    
                    if (!this.hasMore) {
                        this.loader.textContent = '没有更多内容了';
                    }
                    
                    this.isLoading = false;
                } catch (error) {
                    console.error('Error loading data:', error);
                    this.isLoading = false;
                    this.loader.textContent = '加载失败，下拉刷新重试';
                }
            }
            
            setupIntersectionObserver() {
                const target = this.waterfall.getShorterColumn();
                const observer = new IntersectionObserver((entries) => {
                    if (entries[0].isIntersecting && !this.isLoading && this.hasMore) {
                        this.loadData();
                    }
                }, {
                    rootMargin: '0px 0px 200px 0px' // 提前200px开始加载
                });
                
                // 创建一个观察目标元素
                const sentinel = document.createElement('div');
                sentinel.style.height = '1px';
                sentinel.style.width = '1px';
                sentinel.style.clear = 'both';
                sentinel.style.visibility = 'hidden';
                this.waterfall.getShorterColumn().appendChild(sentinel);
                
                observer.observe(sentinel);
            }
            
            setupPullToRefresh() {
                let startY = 0;
                let currentY = 0;
                let diffY = 0;
                let isDragging = false;
                
                document.addEventListener('touchstart', (e) => {
                    if (window.scrollY === 0) {
                        isDragging = true;
                        startY = e.touches[0].clientY;
                    }
                });
                
                document.addEventListener('touchmove', (e) => {
                    if (!isDragging) return;
                    
                    currentY = e.touches[0].clientY;
                    diffY = currentY - startY;
                    
                    if (diffY > 0) {
                        e.preventDefault(); // 阻止页面滚动
                        this.refreshIndicator.style.transform = `translateY(${Math.min(diffY, 80)}px)`;
                        
                        if (diffY >= 60) {
                            this.refreshIndicator.classList.add('visible');
                            this.refreshIndicator.querySelector('.refresh-spinner').textContent = '松开刷新...';
                        } else {
                            this.refreshIndicator.classList.remove('visible');
                            this.refreshIndicator.querySelector('.refresh-spinner').textContent = '下拉刷新...';
                        }
                    }
                });
                
                document.addEventListener('touchend', async () => {
                    if (!isDragging) return;
                    
                    isDragging = false;
                    this.refreshIndicator.style.transform = 'translateY(0)';
                    
                    if (diffY >= 60) {
                        this.refreshIndicator.classList.add('visible');
                        this.refreshIndicator.querySelector('.refresh-spinner').textContent = '正在刷新...';
                        
                        // 执行刷新操作
                        await this.loadData(true);
                        
                        // 隐藏刷新指示器
                        setTimeout(() => {
                            this.refreshIndicator.classList.remove('visible');
                            this.refreshIndicator.querySelector('.refresh-spinner').textContent = '下拉刷新...';
                        }, 1000);
                    }
                    
                    startY = 0;
                    currentY = 0;
                    diffY = 0;
                });
            }
            
            handleResize() {
                // 可以在这里添加响应式调整的逻辑
                console.log('Window resized');
            }
        }

        // 启动应用
        document.addEventListener('DOMContentLoaded', () => {
            new App();
        });
    </script>
</body>
</html>